<template>
  <v-bottom-sheet v-model="sheet">
    <v-sheet max-height="200px" class="pa-3 bg-color-transparent">
      <v-card shaped class="bg-primary">
        <v-card-title class="!flex justify-between">
          <v-btn variant="text" @click="sheet = !sheet" aria-label="关闭创建歌单弹窗">取消</v-btn>

          <v-btn variant="text" @click="submit" aria-label="完成">完成</v-btn>
        </v-card-title>
        <v-card-text>
          <v-form ref="form">
            <v-text-field
              autofocus
              v-model="titleval"
              label="歌单名称"
              hint="输入标题"
              persistent-hint
              :rules="[rules.required, rules.customStrLength(50)]"
            ></v-text-field>
          </v-form>
        </v-card-text>
      </v-card>
    </v-sheet>
  </v-bottom-sheet>
</template>

<script>
import rules from "../plugins/validate.js";
import { gedanController } from "../api/cloudbase-user-action-log";

export default {
  name: "NewGenDan",
  props: {
    visbale: {
      type: Boolean,
      default: false,
    },
    // add 是新增歌单， edit 是编辑歌单
    type: {
      type: String,
      default: "add",
    },
    // 编辑模式下 必填 要修改歌单的ID
    id: {
      type: [String, Number],
      default: "",
    },
    // 编辑模式下 回调的 歌单名称
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      sheet: this.visbale,
      titleval: this.value,
      rules,
    };
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.$jcLoading.show();
        if (this.type === "add") {
          console.log(this.titleval);
          gedanController
            .add(this.titleval)
            .then(() => {
              this.sheet = false;
              this.$emit("submit");
            })
            .finally(() => {
              this.$jcLoading.close();
            });
        } else {
          gedanController
            .edit(this.id, this.titleval)
            .then(() => {
              console.log(this.titleval);
              this.sheet = false;
              this.$emit("submit");
            })
            .finally(() => {
              this.$jcLoading.close();
            });
        }
      }
    },
    clear() {
      this.titleval = "";
      this.$nextTick(() => {
        this.$refs.form.reset();
      });
    },
  },
  watch: {
    sheet(newVal) {
      this.$emit("jcchange", newVal);
      this.clear();
    },
    visbale(newVal) {
      this.sheet = newVal;
    },
    value(newVal) {
      setTimeout(() => {
        this.titleval = newVal;
      }, 200);
    },
  },
};
</script>

<style scoped></style>
